<template>


<div>

  <el-card shadow="hover"  class="box-card" v-for="item in showDataList" :key="item.label"  >
    <div v-if="item.click" style="background-color:whitesmoke"  >
      <div @click="func(item.params)"  >
        <div slot="header" >
          <span style="font-size: 25px;color: red"><b>{{ item.label }}</b></span>
        </div>
        <div class="text item">
          {{ item.val }}
        </div>
      </div>

    </div>
    <div v-else>
      <div slot="header" class="clearfix">
        <span>{{ item.label }}</span>
      </div>
      <div class="text item">
        {{ item.val }}
      </div>
    </div>

  </el-card>

  <!--  -->

  <el-dialog :title="title" :visible.sync="open" @close="countDiaLogClose" width="900px" append-to-body>
    <el-form :model="countQueryParams" ref="queryForm" :inline="true" v-show="true" label-width="68px">
      <el-form-item label="用户名称" prop="userName">
        <el-input
          v-model="countQueryParams.userName"
          placeholder="请输入用户名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="手机号" prop="phone">
        <el-input
          v-model="countQueryParams.phone"
          placeholder="请输入手机号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>


      <el-form-item label="收支类型" prop="isType">
        <el-select
          v-model="countQueryParams.isType"
          placeholder="发布类型"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in countIsTypes"
            :key="dict.label"
            :label="dict.label"
            :value="dict.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="userLogsCountList" >
      <el-table-column label="用户编号" align="center" prop="id" />

      <el-table-column label="手机号" align="center" prop="phone" />
      <el-table-column label="用户姓名" align="center" prop="userName" />
      <el-table-column label="今日 （消证或积分） 释放 提现量" align="center" prop="toDayDisappearCount" >
        <template slot-scope="scope">
          {{scope.row.toDayIntegralCount + scope.row.toDayDisappearCount}}
        </template>
      </el-table-column>
      <el-table-column label="用户统计量" align="center" prop="formInfo" />
      <!--      <el-table-column label="消息内容" align="center" prop="content" />-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="userInfos(scope.row)"
            v-hasPermi="['admin:log:list']"
          >查看用户详细</el-button>

        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="countTotal>0"
      :total="countTotal"
      :page.sync="countQueryParams.pageNum"
      :limit.sync="countQueryParams.pageSize"
      @pagination="getList"
    />


  </el-dialog>

  <el-dialog :title="infoTitle" :visible.sync="infoOpen"  width="900px" append-to-body>

    <el-table v-loading="loading" :data="userLogsInfosList" >
      <el-table-column label="用户编号" align="center" prop="id" />

      <el-table-column label="手机号" align="center" prop="phone" />
      <el-table-column label="用户姓名" align="center" prop="userName" />
      <el-table-column label="数量" align="center" prop="formInfo" />
      <el-table-column label="说明" align="center" prop="jsonTxt" />
      <el-table-column label="创建时间" align="center" prop="createTime" />
    </el-table>

    <pagination
      v-show="infoTotal>0"
      :total="infoTotal"
      :page.sync="infoQueryParams.pageNum"
      :limit.sync="infoQueryParams.pageSize"
      @pagination="getInfoList"
    />


  </el-dialog>

</div>

</template>

<script>
import {listAddrs} from "@/api/admin/show_index";
import {userLogsDisappearCount,userLogsDisappearInfos,userLogsIntegralCount,userLogsIntegralInfos} from "@/api/admin/logs";

export default {
  name: "index",
  data() {
    return {
      open:false,
      infoOpen:false,

      // 遮罩层
      loading: true,
      title:"首页统计项",
      infoTitle:"用户详细统计项",
      // 版本号
      version: "3.2.0",
      showDataList:[],
      userLogsCountList:[],
      userLogsInfosList:[],
      countIsTypes:[

      ],
      disOptions:[
        {
          label:"收入"
        },{label:"支出"}
      ],
      integralOptions:[
        {
          label:"兑换"
        },{label:"提现"}
      ],
      // 查询参数
      countQueryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        userName:null,
        phone:null,
        val: null,

      },
     infoQueryParams: {
        pageNum: 1,
        pageSize: 10,

        val: null,

      },
      // 总条数
      countTotal: 0,
      infoTotal:0
    };
  },
  created() {
    listAddrs().then(res =>{
      this.showDataList = res.data
    })
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    countDiaLogClose(){
      this.countQueryParams.pageNum = 1;
    },
    func(val){
       // 可以废弃掉
      this.msgSuccess("此功能已废弃!");
      return;
      this.userLogsCountList = [];
      this.open = true;
      this.loading = true;
      this.countQueryParams.val = val;
      if ("disappear" == val) {
        this.countIsTypes =  this.disOptions;
        // 消证
        this.title = "用户消证释放统计"
        userLogsDisappearCount(this.countQueryParams).then(res =>{
          this.userLogsCountList = res.rows;
          this.countTotal = res.total;
        })
      }else{
        // 积分
        // integral
        this.title = "用户积分提现统计"
        this.countIsTypes =  this.integralOptions;
        userLogsIntegralCount(this.countQueryParams).then(res =>{
          this.userLogsCountList = res.rows;
          this.countTotal = res.total;

        })
      }

      this.loading = false;
    },
    getList() {
      this.loading = true;
      if ("disappear" == this.countQueryParams.val) {
        // 消证
        this.title = "用户释放总量"
        userLogsDisappearCount(this.countQueryParams).then(res =>{
          this.userLogsCountList = res.rows;
          this.countTotal = res.total;
        })
      }else{
        // 积分
        // integral
        this.title = "用户总提现金额"
        userLogsIntegralCount(this.countQueryParams).then(res =>{
          this.userLogsCountList = res.rows;
          this.countTotal = res.total;

        })
      }
      this.loading = false;
    },
    getInfoList(){
      if ("disappear" == this.countQueryParams.val) {
        // 消证
        this.infoTitle = "用户释放详细记录"
        userLogsDisappearInfos(this.infoQueryParams).then(res =>{
          this.userLogsInfosList = res.rows;
          this.infoTotal = res.total;
        })
      }else{
        // 积分
        // integral
        this.infoTitle = "用户提现金额详细记录"
        userLogsIntegralInfos(this.infoQueryParams).then(res =>{
          this.userLogsInfosList = res.rows;
          this.infoTotal = res.total;

        })
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.countQueryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 详细列表
    userInfos(row){
      this.infoQueryParams.buiId = row.id;
      this.infoQueryParams.isType = this.countQueryParams.isType;
      if ("disappear" == this.countQueryParams.val) {
        // 消证
        this.infoTitle = "用户释放详细记录"
        userLogsDisappearInfos(this.infoQueryParams).then(res =>{
          this.userLogsInfosList = res.rows;
          this.infoTotal = res.total;
        })
      }else{
        // 积分
        // integral
        this.infoTitle = "用户提现金额详细记录"
        userLogsIntegralInfos(this.infoQueryParams).then(res =>{
          this.userLogsInfosList = res.rows;
          this.infoTotal = res.total;

        })
      }
      this.infoOpen = true;
    }
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 310px;
  float: left;
  margin: 10px 10px 10px 10px;
  border-radius: 30px
}
</style>

